<template>
    <div>
        <div class="top">
            <van-nav-bar left-arrow :border="false" @click-left="$router.back()" class="left" />
            <span class="text_1">DM房间</span>
        </div>
        <div class="room">
            <img src="@/assets/images/DMroom/roompic.png" alt="" class="pic1">
            <div class="room-right">
                <span class="room-text">无耻之徒</span>
                <div class="tag-box">
                    <div class="tag"><a class="text">7人</a></div>
                    <div class="tag"><a class="text">推理</a></div>
                    <div class="tag"><a class="text">现代</a></div>
                    <div class="tag"><a class="text">进阶</a></div>
                </div>
                <div class="script-price">
                    <span class="price">剧本价格:</span>
                    <img src="@/assets/images/DMroom/price1.png" alt="" class="price1">
                    <span class="text-8">30</span>
                </div>
                <div class="score-wrap">
                    <span class="score">9.6</span>
                    <div class="love-point">
                        <div class="love-pic" v-for="x in 4" :key="x">
                            <img src="@/assets/images/DMroom/love-pic.png" alt="" class="each-love-pic">
                        </div>
                        <div class="evaluate">
                            78人评价
                        </div>
                    </div>
                    <img src="@/assets/images/DMroom/un-love-pic.png" alt="" class="un-love">
                </div>
            </div>
        </div>
        <div v-for="x in 3" :key="x">
            <div id="people">
                <img src="@/assets/images/DMroom/roompic.png" alt="" class="p-pic">
                <div class="p-right">
                    <div class="p-title">
                        <img src="@/assets/images/DMroom/icon.png" alt="" class="p-icon">
                        <span class="p-text">无耻之徒</span>
                    </div>
                    <span class="p-name">小奶兔</span>
                    <div class="judge">
                        <span class="play-num">已开场81场</span>
                        <div class="average-score">
                            <span class="av-score">好评率99.3%</span>
                        </div>
                    </div>
                    <div class="p-bottom">
                        <div class="wait-wrap">
                            <div class="waiting">
                                <span class="waiting-people">等5人</span>
                            </div>
                            <div class="price-wrap">
                                <img src="@/assets/images/DMroom/price1.png" alt="" class="p-price">
                                <div class="main-price">
                                    <span class="true-price">30</span>
                                    <span class="unit">/人</span>
                                </div>
                            </div>
                        </div>
                        <button class="join-wrap">
                            <span class="join">立即进入</span>
                        </button>
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    
}
</script>
<style scoped lang="less">


.left {
    width: .15rem;
    height: .15rem;
    position: fixed;
    left: .16rem;
    margin-top: .0rem;
    z-index: 5;
    float: left;
 color:rgba(51, 51, 51, 1);
    
}
.text_1 {
    width: 0.555rem;
    height: 0.145rem;
    color: rgba(51, 51, 51, 1);
    font-size: 0.15rem;
    font-family: PingFangSC-Regular;
    text-align: center;
    white-space: nowrap;
    line-height: 0.15rem;
    margin-top: 0.15rem;
    margin-left: 1.595rem;
    float: left;
}
.room{
        background-color: rgba(243, 243, 243, 1);
        width: 3.75rem;
        height: 1.4rem;
        position: relative;
        top: 0.14rem;
        display: flex;
}
.pic1{
        width: 0.77rem;
        height: 1.02rem;
        position: absolute;
        top: .175rem;
        left: .36rem;
        float: left;
        /* margin: 0.175rem 0 0 0.36rem; */
}
.room-right{
        width: 1.785rem;
        height: 1.04rem;
        display: flex;
        position: relative;
        top: .175rem;
        left: 1.235rem;
        /* background-color:aqua; */
        float: left;
        /* margin: 0.175rem 0.73rem 0 0.105rem; */
}
.room-text{
        width: 0.55rem;
        height: 0.135rem;
        color: rgba(51, 51, 51, 1);
        font-size: 0.14rem;
        font-family: PingFangSC-Medium;
        text-align: left;
        white-space: nowrap;
        line-height: 0.14rem;
        /* position: absolute; */
        /* top: .175rem; */
        /* left:1.235rem; */
}
.tag-box{
display: flex;
justify-content:space-between;
width: 1.78rem;
    height: 0.16rem;
    position: absolute;
    /* background-color:chartreuse; */
    top: .26rem;
    left: 0.005rem;
}
.tag{
    background-color: rgba(242, 229, 255, 1);
        border-radius: 16px;
        height: 0.16rem;
        width: 0.4rem;
        position: relative;
}
.text{
    width: 0.18rem;
        height: 0.095rem;
        color: rgba(51, 51, 51, 1);
        font-size: 0.1rem;
        font-family: PingFangSC-Medium;
        text-align: left;
        white-space: nowrap;
        line-height: 0.1rem;
        position: absolute;
            top: 0.03rem;
            left: 0.09rem;
        /* margin: 0.03rem 0 0 0.11rem; */
}
.script-price{
  display: flex;
   width: 1.05rem;
    height: 0.2rem;
    position: absolute;
    top: .545rem;
}
.price{
    width: 0.605rem;
        height: 0.13rem;
        color: rgba(51, 51, 51, 1);
        font-size: 0.14rem;
        font-family: PingFangSC-Medium;
        text-align: left;
        white-space: nowrap;
        line-height: 0.14rem;
        margin-top: 0.03rem;
}
.price1{
     width: 0.2rem;
        height: 0.2rem;
        margin-left: 0.035rem;
}
.text-8{
    width: 0.18rem;
        color: rgba(181, 108, 255, 1);
        font-size: 0.16rem;
        font-family: PingFangSC-Medium;
        text-align: left;
        white-space: nowrap;
        line-height: 0.16rem;
        margin: 0.03rem 0 0 0.03rem;
}
.score-wrap{
        display: flex;
        width: 1.18rem;
            height: 0.24rem;
            position: absolute;
            top: .8rem;
            left:0.01rem ;
}
.score{
    width: 0.33rem;
        color: rgba(34, 34, 34, 1);
        font-size: 0.25rem;
        font-family: PingFangSC-Semibold;
        text-align: left;
        white-space: nowrap;
        line-height: 0.25rem;
        margin-top: 0.03rem;
}
/* 右侧心形和评价区域 */
.love-point{
        display:flex;
        width: 0.595rem;
            height: 0.24rem;
            margin-left: 0.095rem;
} 
/* 图片区域 */
.love-pic{
 display: flex;
 justify-content: space-between;
   width: 0.12rem;
    height: 0.12rem;
    margin-left: 0.03rem;
}

.each-love-pic{
    width: 0.12rem;
        height: 0.12rem;
}
.evaluate{
        width: 0.485rem;
        height: 0.105rem;
        color: rgba(51, 51, 51, 1);
        font-size: 0.11rem;
        font-family: PingFangSC-Light;
        text-align: center;
        white-space: nowrap;
        line-height: 0.11rem;
        position: absolute;
        top:0.12rem;
        margin: 0.015rem 0 0 0.005rem;
}
.un-love{
        width: 0.12rem;
            height: 0.12rem;
            margin-left: 0.04rem;
}
#people{
display: flex;
justify-content: space-between;
box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.1);
    background-color: rgba(255, 255, 255, 1);
    border-radius: 20px;
    width: 3.35rem;
    height: 1.2rem;
    position: relative;
    left: .2rem;
      margin-top: .25rem;
}
.p-pic{
    width: 0.77rem;
        height: 1.02rem;
        position: absolute;
        top:0.09rem ;
        left: 0.09rem;
        // margin: 0.09rem 0 0 0.09rem;
}
.p-right{
    width: 2.32rem;
        height: 1.07rem;
        position:absolute;
        top:0.08rem;
        right:0.09rem;
}
.p-title{
    display: flex;
    justify-content: space-between;
    width: 0.585rem;
        height: 0.15rem;
        margin-left: 0.005rem;
}
.p-icon{
    width: 0.15rem;
        height: 0.15rem;
}
.p-text{
    width: 0.395rem;
        height: 0.1rem;
        color: rgba(153, 153, 153, 1);
        font-size: 0.1rem;  
        font-family: PingFangSC-Regular;
        text-align: left;
        white-space: nowrap;
        line-height: 0.1rem;
        margin-top: 0.025rem;
}
.p-name{
    width: 0.415rem;
        height: 0.135rem;
        color: rgba(51, 51, 51, 1);
        font-size: 0.14rem;
        font-family: PingFangSC-Medium;
        text-align: left;
        white-space: nowrap;
        line-height: 0.14rem;
        position: absolute;
        top: .205rem;
        left: 0.025rem;
}
.judge{
    display: flex;
    flex-direction: column;
    z-index: 37;
        height: 0.15rem;
        background-size: 100% 100%;
        width: 1rem;
        position: absolute;
        top:.4rem;
         left: 0.525rem;
        background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/psi5c4lt2mkhzyehecwdqe0di9fve0adup3955eb80-0f7b-4a08-9018-ed23bbd4de90) 100% no-repeat;
}
.play-num{
    z-index: 40;
        width: 0.58rem;
        height: 0.09rem;
        color: rgba(255, 255, 255, 1);
        font-size: 0.1rem;
        font-family: PingFangSC-Light;
        text-align: center;
        white-space: nowrap;
        line-height: 0.1rem;
        margin: 0.03rem 0 0 0.355rem;
}
.average-score{
    display: flex;
    flex-direction: column;
    background-image: linear-gradient(90deg,
                rgba(255, 255, 255, 1) 0,
                rgba(204, 154, 255, 1) 0,
                rgba(211, 168, 255, 1) 0,
                rgba(211, 168, 255, 1) 0,
                rgba(143, 32, 255, 1) 100%,
                rgba(143, 32, 255, 1) 100%);
        border-radius: 15px;
        z-index: 38;
        height: 0.15rem;
        width: 0.745rem;
        position: absolute;
        left: -0.495rem;
        top: 0;
}
.av-score{
    width: 0.615rem;
        height: 0.1rem;
        color: rgba(255, 255, 255, 1);
        font-size: 0.1rem;
        font-family: PingFangSC-Light;
        text-align: center;
        white-space: nowrap;
        line-height: 0.1rem;
        margin: 0.025rem 0 0 0.065rem;
}
.p-bottom{
    width: 2.32rem;
        height: 0.43rem;
        position:absolute;
        top:.64rem;
}
.wait-wrap{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 0.67rem;
        height: 0.43rem;
}
.waiting{
    flex-direction: column;
    background-color: rgba(242, 229, 255, 1);
        border-radius: 16px;
        height: 0.16rem;
        margin-left: 0.03rem;
        width: 0.4rem;
}
.waiting-people{
    width: 0.26rem;
        height: 0.1rem;
        color: rgba(51, 51, 51, 1);
        font-size: 0.1rem;
        font-family: PingFangSC-Medium;
        text-align: justifyLeft;
        white-space: nowrap;
        line-height: 0.1rem;
        position:absolute;
        margin-left: 0.03rem;
        margin-top: 0.02rem;
}
.price-wrap{
    display: flex;
    justify-content: space-between;
    width: 0.67rem;
        height: 0.2rem;
        margin-top: 0.07rem;
}
.p-price{
    width: 0.2rem;
        height: 0.2rem;
}
.main-price{
    width: 0.44rem;
        height: 0.14rem;
        overflow-wrap: break-word;
        font-size: 0;
        font-family: PingFangSC-Medium;
        text-align: left;
        white-space: nowrap;
        line-height: 0.16rem;
        margin-top: 0.02rem;
}
.true-price{
    width: 0.44rem;
        color: rgba(181, 108, 255, 1);
        font-size: 0.16rem;
        font-family: PingFangSC-Medium;
        text-align: left;
        white-space: nowrap;
        line-height: 0.16rem;
}
.unit{
    width: 0.44rem;
        height: 0.14rem;
        color: rgba(51, 51, 51, 1);
        font-size: 0.15rem;
        font-family: PingFangSC-Medium;
        text-align: left;
        white-space: nowrap;
        line-height: 0.15rem;
}
.join-wrap{
    flex-direction:column;
    background-color: rgba(159, 64, 255, 1);
        border-radius: 25px;
        height: 0.25rem;
        position: absolute;
        top: .14rem;
        right: .08rem;  
        width: 0.8rem;
}
.join{
        width: 0.47rem;
            height: 0.115rem;
            color: rgba(255, 255, 255, 1);
            font-size: 0.12rem;
            font-family: PingFangSC-Medium;
            text-align: justifyLeft;
            white-space: nowrap;
            line-height: 0.12rem;
            position: absolute;
            z-index: 90;
            margin: 0.065rem 0 0 0.16rem;
}
</style>